<template>
    <div>
        <el-input
            size="small"
            v-model="jobLevel.name"
            placeholder="请输入需要添加的职称..."
            prefix-icon="el-icon-plus"
            style="width: 300px"
            clearable
        ></el-input>
        <el-select
            size="small"
            v-model="jobLevel.titleLevel"
            placeholder="请选择职称等级"
            clearable
            style="margin-left: 6px; margin-right: 6px"
        >
            <el-option
                v-for="(item, index) in titleLevels"
                :key="index"
                :label="item"
                :value="item"
            ></el-option>
        </el-select>
        <el-button
            size="small"
            type="primary"
            icon="el-icon-plus"
            @click="addJobLevel"
            >添加</el-button
        >
        <el-button
            type="danger"
            size="small"
            :disabled="multipleSelection.length == 0"
            @click="deleteMorePosition"
            >批量删除</el-button
        >
        <el-table
            :data="jobLevels"
            style="width: 100%"
            stripe
            border
            @selection-change="handleSelectionChange"
        >
            <el-table-column
                type="selection"
                width="55"
                align="center"
            ></el-table-column>
            <el-table-column prop="id" label="编号" align="center" width="80">
            </el-table-column>
            <el-table-column prop="name" label="职位名称" align="center">
            </el-table-column>
            <el-table-column
                prop="titleLevel"
                label="职称等级"
                align="center"
            ></el-table-column>
            <el-table-column
                prop="createDate"
                label="创建日期"
                align="center"
                width="200"
            ></el-table-column>
            <el-table-column
                prop="enabled"
                label="是否启用"
                align="center"
                width="150"
            >
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.enabled == 1" type="success"
                        >已启用</el-tag
                    >
                    <el-tag v-else type="danger">未启用</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="180">
                <template slot-scope="scope">
                    <el-button
                        size="mini"
                        type="warning"
                        @click="editHandle(scope.row)"
                        >编辑</el-button
                    >
                    <el-button
                        size="mini"
                        type="danger"
                        @click="deleteHandle(scope.row)"
                        >删除</el-button
                    >
                </template>
            </el-table-column>
        </el-table>

        <!-- 修改弹出框 -->
        <el-dialog
            title="编辑职称信息"
            :visible.sync="dialogVisible"
            width="30%"
            center
        >
            <el-row align="middle">
                <el-col :offset="1" :span="6">职称名称：</el-col>
                <el-col :span="16">
                    <el-input
                        v-model="updateJobLevel.name"
                        size="small"
                        clearable
                    ></el-input>
                </el-col>
            </el-row>

            <el-row>
                <el-col :offset="1" :span="6">职称等级：</el-col>
                <el-col :span="16">
                    <el-select
                        class="editSelection"
                        size="small"
                        v-model="updateJobLevel.titleLevel"
                        placeholder="请选择职称等级"
                        clearable
                    >
                        <el-option
                            v-for="(item, index) in titleLevels"
                            :key="index"
                            :label="item"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-col>
            </el-row>

            <el-row>
                <el-col :offset="1" :span="6">是否启用：</el-col>
                <el-col :span="16">
                    <el-switch
                        v-model="updateJobLevel.enabled"
                        active-color="#13ce66"
                        inactive-color="#ff4949"
                        active-text="已启用"
                        inactive-text="未启用"
                    >
                    </el-switch>
                </el-col>
            </el-row>
            <span slot="footer" class="dialog-footer">
                <el-button
                    @click="
                        dialogVisible = false;
                        $message.info('已取消该操作');
                    "
                    size="small"
                    >取 消</el-button
                >
                <el-button type="primary" size="small" @click="saveHandle"
                    >保存</el-button
                >
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    data() {
        return {
            // 职称输入框
            jobLevel: {
                name: "",
                titleLevel: "",
            },
            titleLevels: ["正高级", "副高级", "中级", "初级", "员级"],
            // 页面数据
            jobLevels: [],
            // 修改弹出框显示或隐藏
            dialogVisible: false,
            // 更新
            updateJobLevel: {
                id: null,
                name: "",
                titleLevel: "",
                enabled: false,
            },
            // 选项
            multipleSelection: [],
        };
    },
    created() {
        this.initJobLevel();
    },
    methods: {
        // 获取页面数据
        initJobLevel() {
            this.getRequest("/system/basic/joblevel/getAllJobLevels").then(
                (res) => {
                    if (res) {
                        this.jobLevels = res;
                        // 清空添加输入框
                        this.jobLevel.name = "";
                        this.jobLevel.titleLevel = "";
                    }
                }
            );
        },
        // 添加职称
        addJobLevel() {
            if (this.jobLevel.name && this.jobLevel.titleLevel) {
                this.postRequest(
                    "/system/basic/joblevel/addJobLevel",
                    this.jobLevel
                ).then((res) => {
                    if (res) {
                        this.initJobLevel();
                    }
                });
            } else {
                this.$message.error("请将职称和职称等级填写完整");
            }
        },
        // 删除单条
        deleteHandle(row) {
            this.$confirm(
                "此操作将永久删除【" + row.name + "职称, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    // 调用删除接口
                    this.deleteRequest(
                        "/system/basic/joblevel/deleteJobLevel/" + row.id
                    ).then((res) => {
                        if (res) {
                            this.initJobLevel();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
        // 编辑
        editHandle(row) {
            // 克隆对象
            Object.assign(this.updateJobLevel, row);
            this.updateJobLevel.createDate = null;
            this.dialogVisible = true;
        },
        // 保存
        saveHandle() {
            if (!this.updateJobLevel.name || !this.updateJobLevel.titleLevel) {
                return this.$message.error("请将职位名称和职位等级填写完整");
            }
            this.putRequest(
                "/system/basic/joblevel/updateJobLevel",
                this.updateJobLevel
            ).then((res) => {
                if (res) {
                    this.dialogVisible = false;
                    // this.updateJobLevel = null;
                    this.initJobLevel();
                }
            });
        },
        // 选择事件
        handleSelectionChange(value) {
            this.multipleSelection = value;
        },
        // 批量删除
        deleteMorePosition() {
            this.$confirm(
                "此操作将永久删除【" +
                    this.multipleSelection.length +
                    "】条职位信息, 是否继续?",
                "提示",
                {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }
            )
                .then(() => {
                    let ids = "?";
                    this.multipleSelection.forEach((item, index) => {
                        ids += "ids=" + item.id;
                        // 判断当前选择的是否是最后一个
                        if (index != this.multipleSelection.length - 1) {
                            ids += "&";
                        }
                    });
                    // 调用删除接口
                    this.deleteRequest(
                        "/system/basic/joblevel/deleteJobLevelsByIds" + ids
                    ).then((res) => {
                        if (res) {
                            this.initJobLevel();
                        }
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除",
                    });
                });
        },
    },
};
</script>

<style scoped>
.el-table {
    margin-top: 15px;
}
.el-row {
    padding: 10px;
    display: flex;
    align-items: center;
}
.editSelection {
    width: 100%;
}
</style>